<template>
  <div>
    <van-nav-bar title="我的" />
    <div class="user_header">
      <van-icon name="set" class="user_set" />
      <div class="user_avatar">
        <!-- <img :src="avatar" alt="头像" width="55" height="55"> -->
        <van-image round width="55" height="55" :src="userInfo.avtar" />
      </div>
      <div>{{ userInfo.nickname }}</div>
    </div>
    <div class="user_module">
      <van-cell-group>
        <van-cell icon="hot-o" title="我的收藏" to="/collect" isLink />
        <van-cell icon="label-o" title="我的发布" to="/myPublic" isLink />
        <van-cell icon="contact-o" title="编辑信息" to="/info" isLink />
      </van-cell-group>
    </div>

    <div style="margin: 16px">
      <van-button round block type="danger" @click="loginout">
        退出登录
      </van-button>
    </div>
  </div>
</template>

<script>
  import axios from '../utils/request'
import { Dialog, Toast } from "vant";

export default {
  data() {
    return {
      userInfo: {},
    };
  },
  mounted() {
    //vue 的生命周期函数
    //去缓存中的数据
    //JSON.parse JSON字符串转换为对象
    // let user =JSON.parse(localStorage.getItem("userInfo"))
    // this.userInfo= user

    //取接口的数据
    axios
      .get("/getUser")
      .then((response) => {

          this.userInfo = response.data.data;


      });
  },
  methods: {
    loginout() {
      Dialog.confirm({
        title: "提示",
        message: "确认退出登录吗",
      })
        .then(() => {
          localStorage.removeItem("userInfo");
          localStorage.removeItem("token");
          this.$router.push("/login");
        })
        .catch(() => {
          // on cancel
        });
    },
    go() {
      this.$router.push("/login");
    },
  },
};
</script>

<style >
.user_header {
  background-color: #55aa00;
  height: 150px;
  text-align: center;
  color: #fff;
  padding-top: 30px;
}

.user_set {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
}

.user_avatar {
  margin-bottom: 10px;

  img {
    border: 0;
    border-radius: 50%;
  }
}
</style>
